<template>
    <div class="e-form">
        <BillTop @cancel="handleClose"></BillTop>
        <div class="tabs">
            <div class="tabs-title">基本信息</div>
            <div style="width: 100%" class="form">
                <el-form
                    :model="formData"
                    label-width="150px"
                    :rules="formDataRules"
                    ref="formDataRef"
                >
                    <el-row>
                        <!-- <el-col :span="12">
                            <el-form-item label="分摊编号">
                                {{ formData.billNo }}
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="12">
                            <el-form-item label="分摊日期">
                                <el-date-picker
                                    v-model="formData.billDate"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd"
                                    :clearable="false"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item
                                label="计划/合同编号"
                                prop="contractNo"
                            >
                                <el-input
                                    v-model="formData.contractNo"
                                    readonly
                                >
                                    <i
                                        slot="suffix"
                                        class="
                                            el-input__icon
                                            el-icon-document-copy
                                        "
                                        @click="contractNoClick"
                                    ></i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="机构" prop="orgName">
                                {{ formData.orgName }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="录入人" prop="founderName">
                                {{ formData.founderName }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态" prop="state">
                                {{  showState(formData.state) }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-form-item label="备注">
                            <el-input
                                type="textarea"
                                :rows="2"
                                resize="none"
                                placeholder="请输入内容"
                                v-model="formData.remarks"
                            >
                            </el-input>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="buttons">
            <el-button type="primary" style="background: #2e61d7" @click="save"
                >保存</el-button
            >

            <el-button @click="handleClose">取消</el-button>
        </div>
    </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import { mapState, mapMutations } from 'vuex'
import { formatDate } from '@/utils/common'
import request from '@/api/settlementManagement/equipmentBilling/rentalCost'

export default {
    data () {
        return {
            //表单数据
            formData: {
                billDate: formatDate(new Date(), 'yyyy-MM-dd'),
                billId: '',
                billNo: '',
                contractNo: '',
                evaluateGrade: 0,
                founderId: '',
                founderName: '',
                leaseOrgId: '',
                leaseOrgName: '',
                leaseSettleId: '',
                leaseSettleNo: '',
                nullifyCreated: '',
                nullifyCreator: '',
                nullifyCreatorId: '',
                nullifyDesciption: '',
                nullifyReason: '',
                orgId: '',
                orgName: '',
                remarks: '',
                settleAmount: 0,
                state: 0,
                workId: ''
            },
            orgId: '', //机构id
            orgName: '', //机构名称
            formDataRules: {
                contractNo: [
                    {
                        required: true,
                        message: '请选择计划/合同编号',
                        trigger: 'blur'
                    }
                ],
            },
            planOrNot: false
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
            currencyForm: state => state.equip.equipData.currencyForm //币种
        }),

    },
    watch: {},
    components: {},
    created () {
        let data = JSON.parse(localStorage.getItem('vuex'))
        this.orgId = data.userInfo.orgInfo.orgId
        this.orgName = data.userInfo.orgInfo.orgName
        this.formData.orgName = this.orgName
        this.formData.orgId = this.orgId
        this.formData.founderId = data.userInfo.userId
        this.formData.founderName = data.userInfo.userName
    },
    methods: {
        ...mapMutations(['setAuditParams', 'setSelectedInfo']),
        // 计划/合同编号
        async contractNoClick () {
            let res = await request.getContractNo(this.formData.leaseSettleId)
            if (res.length < 1) {
                this.formData.leaseSettleId = ''
                this.formData.contractNo = ''
                return
            }
            let data = res[0]
            // this.setSelectedInfo(data)
            // openAppClient('/showSelectedData', '选择结果')
            this.formData.leaseSettleId = data.billId // 用于显示已选数据的传参
            this.formData.contractNo = data.billNo // 计划/合同编号
        },

        //保存按钮
        save () {
            this.$refs.formDataRef.validate(valid => {
                if (!valid) return false
                // this.setSelectedInfo(this.formData)
                // openAppClient('/showSelectedData', '传参')
                request.basicInfoAdd(this.formData).then(res => {
                    this.clientPop(
                        'info',
                        '保存成功,是否继续',
                        () => {
                            this.$router.replace({
                                path: '/rentalCostSetEdit',
                                query: {
                                    billid: res,
                                    name: 'apportionDtl'
                                }
                            })
                        },
                        null,
                        this.handleClose
                    )
                })
            })
        },
        //取消按钮
        handleClose () {
            this.$router.replace('/rentalCostSetList')
        },
        showState (state) {
            const _state = this.$store.state.equip.equipData.settleState
            const obj = _state.find(x => x.value === Number(state))
            return obj.label
        }
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}
</style>
